<template>
  <div class="top_bar">
    <input type="checkbox" class="plug-menu" >
    <ul class="top_menu" :style="{visibility: toStatus ? 'visible': 'hidden'}">
      <li :class="{ 'out' : toStatus, 'on': !toStatus}" class="phone-call">
        <a href="tel:028-86168309">
          <img src="../../static/portal-img/plug1.png">
          <span>电话咨询</span>
        </a>
      </li>
      <li :class="{ 'out' : toStatus, 'on': !toStatus}" onclick="demo()">
        <a href="javascript:void(0)" onclick="_MEIQIA('showPanel', {agentToken:'1190d7c49691a0ad6c44e330aa86286b'})">
          <img src="../../static/portal-img/plug2.png">
          <span>养殖技术</span>
        </a>
      </li>
      <li :class="{ 'out' : toStatus, 'on': !toStatus}" onclick="demo()">
        <a href="javascript:void(0)" onclick="_MEIQIA('showPanel', {agentToken:'1190d7c49691a0ad6c44e330aa86286b'})">
          <img src="../../static/portal-img/plug3.png">
          <span>鱼病咨询</span>
        </a>
      </li>
      <li :class="{ 'out' : toStatus, 'on': !toStatus}" onclick="demo()">
        <a href="javascript:void(0)" onclick="_MEIQIA('showPanel', {agentToken:'1190d7c49691a0ad6c44e330aa86286b'})">
          <img src="../../static/portal-img/plug4.png">
          <span>社区功能</span>
        </a>
      </li>
      <li :class="{ 'out' : toStatus, 'on': !toStatus}" onclick="demo()">
        <a href="javascript:void(0)" onclick="_MEIQIA('showPanel', {agentToken:'1190d7c49691a0ad6c44e330aa86286b'})">
          <img src="../../static/portal-img/plug5.png">
          <span>投诉建议</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import {isParent} from '@/modules/util'

export default {
  data() {
    return {
      toStatus: false
    }
  },
  mounted() {
    //解决浮层引发滑动bug
    const tb = document.querySelector('.top_bar')
    const pc = document.querySelector('.phone-call')

    document.addEventListener("touchstart", e => {
      const target = e.target
      if(isParent(target, tb)) {
        e.preventDefault()
        this.toStatus = !this.toStatus
        target.checked = !target.checked
        if(isParent(target, pc)) {
          location.href = "tel:028-86168309";
        }else if(target.className !== 'top_bar' && target.className !== 'plug-menu') {
          demo()
          _MEIQIA('showPanel', {agentToken:'1190d7c49691a0ad6c44e330aa86286b'})
        }
        return 
      }
      if(!isParent(target, tb)) {
        this.toStatus = false
      }
    }, {passtive: false})
  },
  methods: {
    // touch() {
      
    // }
  }
}

// 美洽对接
;(function(m, ei, q, i, a, j, s) {
  m[i] =
    m[i] ||
    function() {
      ;(m[i].a = m[i].a || []).push(arguments)
    }
  ;(j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0])
  j.async = true
  j.charset = "UTF-8"
  j.src = "https://static.meiqia.com/dist/meiqia.js?_=t"
  s.parentNode.insertBefore(j, s)
})(window, document, "script", "_MEIQIA")
_MEIQIA("entId", 24754)

_MEIQIA("manualInit")
_MEIQIA("withoutBtn")
_MEIQIA("allSet", showContactService)

var meiqia_is_init = 0
window.demo = function() {
  if (meiqia_is_init == 0) {
    _MEIQIA("init")
  } else {
    showContactService()
  }
}
function showContactService() {
  meiqia_is_init = 1
  _MEIQIA("showPanel", {
    agentToken:
      "1190d7c49691a0ad6c44e330aa86286b,e59ec994f6f5e8c5dc85c9fcc84b6b5b,a0dde407a975f0eb973017112d227d30"
  })
}
</script>

<style>
/* 客服咨询 */

.plug-menu {
  -webkit-appearance: button;
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 36px;
  position: fixed;
  bottom: 67px;
  right: 17px;
  z-index: 999;
  box-shadow: 0 0 0 4px #ffffff, 0 2px 5px 4px rgba(0, 0, 0, 0.25);
  background-color: #008cf0;
  -webkit-transition: -webkit-transform 200ms;
  -webkit-transform: rotate(1deg);
  color: #fff;
  background-image: url("../../static/portal-img/plug.png");
  background-repeat: no-repeat;
  -webkit-background-size: 80% auto;
  background-size: 80% auto;
  background-position: center center;
}
.plug-menu:before {
  font-size: 20px;
  margin: 9px 0 0 9px;
}
.plug-menu:checked {
  -webkit-transform: rotate(135deg);
}
.top_menu {
  position: fixed;
  right: 0;
  bottom: 47px;
  touch-action: none;
}
.top_menu > li {
  min-width: 86px;
  padding: 0 10px;
  height: 32px;
  border-radius: 32px;
  box-shadow: 0 0 0 3px #ffffff, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
  background: #008cf0;
  margin-bottom: 23px;
  margin-left: 23px;
  z-index: 900;
  transition: all 200ms ease-out;
  -webkit-transition: all 200ms ease-out;
}
.top_menu > li:last-child {
  margin-bottom: 80px;
}
.top_menu > li a {
  color: #fff;
  display: block;
  height: 100%;
  line-height: 32px;
  text-indent: 26px;
  text-decoration: none;
  position: relative;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.top_menu > li a img {
  display: block;
  width: 24px;
  height: 24px;
  text-indent: -999px;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -12px;
  margin-left: -10px;
}
.top_menu > li span {
  margin-left: 4px;
}
.top_menu > li.on:nth-of-type(1) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  width: 100px;
}
.top_menu > li.on:nth-of-type(2) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 600ms ease-out;
  -webkit-transition: all 600ms ease-out;
  width: 100px;
}
.top_menu > li.on:nth-of-type(3) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  width: 100px;
}
.top_menu > li.on:nth-of-type(4) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 400ms ease-out;
  -webkit-transition: all 400ms ease-out;
  width: 100px;
}
.top_menu > li.on:nth-of-type(5) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 300ms ease-out;
  -webkit-transition: all 300ms ease-out;
  width: 100px;
}
.top_menu > li.on:nth-of-type(6) {
  -webkit-transform: translate(175px, 0) rotate(0deg);
  transition: all 200ms ease-out;
  -webkit-transition: all 200ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(1) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 600ms ease-out;
  -webkit-transition: all 600ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(2) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(3) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 400ms ease-out;
  -webkit-transition: all 400ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(4) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 300ms ease-out;
  -webkit-transition: all 300ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(5) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 200ms ease-out;
  -webkit-transition: all 200ms ease-out;
  width: 100px;
}
.top_menu > li.out:nth-of-type(6) {
  -webkit-transform: translate(-20px, 0) rotate(0deg);
  transition: all 100ms ease-out;
  -webkit-transition: all 100ms ease-out;
  width: 100px;
}
</style>